<template>
  <div id="player" class="player"></div>
</template>
<script setup>
import { onMounted, onUnmounted, onBeforeUnmount, ref } from 'vue'
const vodPlayerJs = ref(
  'https://player.polyv.net/resp/vod-player/latest/player.js'
)
const vid = ref('44ca31d0c464ed07a237c789c7797cbd_4')

onMounted(() => {
  loadPlayerScript(loadPlayer)
})
//为视频组件创建保利威JS引用标签
const loadPlayerScript = (callback) => {
  if (!window.polyvPlayer) {
    const myScript = document.createElement('script')
    myScript.setAttribute('src', vodPlayerJs.value)
    myScript.onload = callback
    document.body.appendChild(myScript)
  } else {
    callback()
  }
}
let player = null
//通过VID初始化保利威视频
const loadPlayer = () => {
  const polyvPlayer = window.polyvPlayer
  player = polyvPlayer({
    wrap: '#player',
    vid: vid.value,
    height: 250,
    height: '100%',
    autoplay: true, //自动播放
    //fullScreenOrientation: 'landscape' //portrait 竖屏， landscape 横屏, none 无效果
    // cacheLimitTime: true, // 是否缓存最大已播放时长
    // preloadDataSize: 800,
    // preloadDurationLength: 10,
  })

  console.warn(player)
  //监听
  player.on('s2j_onPlayerInitOver', (...params) => {
    console.log('播放器数据初始化完毕1：', params)
    /**
     * 1、解决播放器中间按钮点击播放失效的场景
     * 2、之所以使用定时器，是因为SDK底层渲染DOM元素需要时间
    */
    //
    setTimeout(() => {
      var btn = document.querySelectorAll(".plv-player-big-play-btn")[0];
      btn.addEventListener("click", function(){
          player.j2s_resumeVideo();
      });
    },500)

  })
  player.on('serverError', function (event, errorCode) {
    console.log(errorCode)
  })

  player.on('s2j_onVideoPlay', (...params) => {})
  player.on('s2j_onVideoPause', (...params) => {})
}
//卸载之后销毁保利威实例
onBeforeUnmount(() => {
  console.log('卸载之后销毁保利威实例');
  player.j2s_pauseVideo()
})
onUnmounted(() => {
  // emit('pause')
  console.log("已销毁")
})
</script>
<style scoped>
#player{
  width: 100%;
  height: 300px;
}
</style>
